<template>
  <div>
    <!--头部信息卡片-->
    <el-card class="box-card elma-20">
      <h2 class="system-title">易唐科技·在线无纸化考试系统后台管理</h2>
      <el-button type="danger" class="esc-sys">退出系统</el-button>
      <div class="info-case">
        <b style="margin-right: 20px;">工号: ZM17123106</b>
        <b>姓名: 马冬梅</b>
      </div>
    </el-card>
    <el-container>
      <!--左侧菜单卡片-->
      <el-card class="box-card">
        <el-row class="tac">
          <el-col :span="24">
            <el-menu default-active="1" class="el-menu-vertical-demo" ref="menuActive">
              <el-menu-item index="1" @click="toggleCard">
                <i class="el-icon-edit"></i>
                <span slot="title">题库录入</span>
              </el-menu-item>
              <el-menu-item index="2" @click="toggleCard">
                <i class="el-icon-document"></i>
                <span slot="title">生成考卷</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-card>

      <!--右侧主体-->
      <el-card class="box-card main">
        <!--题库录入-->
        <chuti v-if="isShow" />

        <!--生成考卷-->
        <examPaper v-else />
      </el-card>
    </el-container>
  </div>
</template>

<script>
import chuti from "./chuti";
import examPaper from "./examPaper";
export default {
  name: "backstage",
  data() {
    return {
      isShow: true // 卡片切换
    };
  },
  components: { chuti, examPaper },
  methods: {
    // 卡片切换,题库录入和生成考卷之间的切换，这里只有两个功能可直接使用布尔
    toggleCard() {
      this.isShow = !this.isShow;
    }
  }
};
</script>

<style scoped="scoped">
.elma-20 {
  margin: 0 20px;
}
/*系统标题*/
.system-title {
  display: inline-block;
  line-height: 60px;
  margin-right: 40px;
}
/*教师信息的容器*/
.info-case {
  display: inline-block;
  line-height: 60px;
  float: right;
}
/*退出系统按钮*/
.esc-sys {
  float: right;
  margin-top: 8px;
  margin-left: 40px;
}
.el-container {
  margin: 6px 20px;
}
/*左侧菜单容器*/
.el-menu {
  border-right: none;
}
.el-menu-item {
  font-size: 22px;
}
/*右侧题库录入容器*/
.main {
  width: calc(100% - 207px);
}
/*form表单*/
.formcatorll {
  padding: 20px;
  max-width: 480px;
}
</style>
